<template>
	<div class="user-login">
		<div class="login-way">
			<span
				:class="isChangeColor === 1 ? 'tip-color' : ''"
				@click="passwordLogin"
				>密码登录</span
			>
			<span class="shuxian">|</span>
			<span
				:class="isChangeColor === 2 ? 'tip-color' : ''"
				@click="messageLogin"
				>短信登录</span
			>
		</div>
		<div class="password-login" v-show="isPassword">
			<form class="password-form">
				<div class="password-input">
					<div class="password">
						<span>账号</span>
						<input type="text" placeholder="请输入账号" />
					</div>
					<div class="password">
						<span>密码</span>
						<input type="password" placeholder="请输入密码" />
					</div>
				</div>
				<div class="password-button">
					<button class="register-button">注册</button>
					<button class="login-button">登录</button>
				</div>
			</form>
		</div>
		<div class="message-login" v-show="isMessage">
			<form>
				<div><span>+86</span><input type="text" /></div>
				<div>
					<span>验证码</span><input type="password" /><span>获取验证码</span>
				</div>
				<button>登录/注册</button>
			</form>
		</div>
		<div class="login-word">
			<span>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</span>
			<span
				>登录或完成注册即代表你同意 <a href="#">用户协议</a>和
				<a href="#">隐私政策</a>
			</span>
		</div>
	</div>
</template>
<script>
// import HeaderComp from "../../components/header";
// import FooterComp from "../../components/footer";
export default {
	name: "LoginComp",
	// components: {
	// 	HeaderComp,
	// 	FooterComp,
	// },
	data() {
		return {
			isPassword: true,
			isMessage: false,
			isChangeColor: 1,
		};
	},
	methods: {
		passwordLogin() {
			this.isPassword = true;
			this.isMessage = false;
			this.isChangeColor = 1;
		},
		messageLogin() {
			this.isPassword = false;
			this.isMessage = true;
			this.isChangeColor = 2;
		},
	},
};
</script>
<style lang="less" scoped>
.user-login {
	margin: 0 auto;
	width: 500px;
	border: 1px solid black;
	background-color: white;
	z-index: 9999;
	padding: 30px 50px;
	box-sizing: border-box;
	border-radius: 5px;
	.login-way {
		display: flex;
		align-items: center;
		justify-content: center;
		// height: 20px;
		span {
			font-size: 18px;
			cursor: pointer;
			padding: 10px 10px;
		}
		.shuxian {
			color: #e7e7e7;
		}
		.tip-color {
			color: #00a1d6;
		}
	}
	.password-login {
		// 	// display: flex;
		// 	// flex-direction: column;
		// 	// align-items: center;
		.password-form {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			.password-input {
				border: 1px solid #e7e7e7;
				border-radius: 8px;
				.password {
					display: flex;
					border-bottom: 1px solid #e7e7e7;
					padding: 0 20px;
					align-items: center;
					// border-radius: 8px 8px 0 0;
					height: 43px;
					span {
						margin-right: 20px;
						font-size: 14px;
						color: #212121;
					}
					input {
						border: none;
					}
				}
			}
			.password-button {
				width: 100%;
				display: flex;
				margin-top: 20px;
				justify-content: center;
				button {
					border: 1px solid #e7e7e7;
					color: #000;
					margin-right: 13px;
					box-sizing: border-box;
					width: 194px;
					height: 40px;
					border-radius: 8px;
					line-height: 40px;
					text-align: center;
					font-size: 14px;
					cursor: pointer;
				}
				.register-button {
					background-color: #ffffff;
				}
				.login-button {
					background-color: #00a1d6;
				}
			}
		}
	}
}
</style>
